import { FC, memo } from "react";
import cssStyle from "../config/cssStyle";
import LeftCardOne from "./left/CardOne/index";
import LeftCardTwo from "./left/CardTwo/index";
import CenterCardOne from "./center/CardOne";
import CenterCardTwo from "./center/CardTwo";
import RightCardOne from "./right/CardOne";
import RightCardTwo from "./right/CardTwo";
import CenterCardThree from "./center/CardThree";

const Main: FC = memo(() => {
  return (
    <div className="w-full px-52px pt-38px pb-46px" style={{ height: `calc(100% - ${cssStyle.HeaderComp['height']})` }}>
      <div className="w-full h-full flex">
        {/* 左侧第一块 */}
        <div className="w-500px h-full flex flex-col">
          <LeftCardOne />
          <LeftCardTwo />
        </div>
        {/* 中间 */}
        <div className="flex-1 ml-17px mr-15px flex flex-col">
          <CenterCardOne />
          <CenterCardTwo />
          <CenterCardThree />
        </div>
        {/* 右侧 */}
        <div className="w-500px h-full flex flex-col">
          <RightCardOne />
          <RightCardTwo />
        </div>
      </div>
    </div>
  )
})

export default Main